<template>
  <div>
    <div style="height: 500px; width: 1000px; border: 1px solid red; position: relative;" ref = 'imageDom'>
      <vdr
              :w="100"
              :h="100"
              v-on:dragging="onDrag"
              v-on:resizing="onResize"
              v-on:resizestop="onResizeStop"
              v-on:dragstop="onDragStop"
              :parent="true"
              :snap="true"
              :snapTolerance="20"
      >
        <img src="../assets/logo.png" class="img">
      </vdr>
      <vdr
              :w="200"
              :h="200"
              v-on:dragging="onDrag"
              v-on:resizing="onResize"
              v-on:resizestop="onResizeStop"
              v-on:dragstop="onDragStop"
              :parent="true"
              :snap="true"
              :snapTolerance="20"
      >
        <video controls class="img">
          <source src="../assets/snsdyvideodownload.mp4" type="video/mp4">
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </vdr>
    </div>
    <img :src="imgSrc" style="width: 100px;height: 50px;">
  </div>
</template>

<script>
  import vdr from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import html2canvas from 'html2canvas';
  export default {
    components: {vdr},
    data: function () {
      return {
        width: 0,
        height: 0,
        x: 0,
        y: 0,
        imgSrc:'',
      }
    },
    mounted(){
      this.getImg()
    },
    methods: {
      onResizeStop(x, y, width, height){
        this.getImg()
      },
      onDragStop(x, y){
        this.getImg()
      },
      onResize: function (x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      },
      onDrag: function (x, y) {
        this.x = x
        this.y = y
      },
      getImg(){
        html2canvas(this.$refs.imageDom).then((canvas) => {
          this.imgSrc = canvas.toDataURL('image/png')
                  .replace('image/png','image/octet-stream')
        })
      }
    }
  }
</script>
<style>
  .img{
    width: 100%;
    height: 100%;
  }
</style>
